<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件练习</title>
</head>
<body>
    <div id="app">
            <todo-input></todo-input>

            <todo-list></todo-list>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
       const todoInputOptions = {//定义TodoInput组件的选项对象   
       //template:模板，用反引号包裹内容
        template:`
          <div>
             <input placeholder="请输入新待办事项" v-modle="inputValue" />
             <button @click="add">添加</button>

             <todo-list/>
          </div>
        `,//add自定义属性
        data(){//data传入数据对象，返回一个初始值
            return {
                inputValue:'初始值'
            }
        },
        methods:{ //方法，添加数据
            add(){
                console.log('添加：',this.inputValue)
            }
        }
    }
    //全局注册组件，Vue.component(组件名称，选项对象)
    Vue.component('TodoInput',todoInputOptions)

    const todoItemOptions = { //TodoItem 组件选项
        template:`
        <li>待办事项你才次啊</li>
        `
    }

    const todoListOptions ={ //TodoList 组件选项
        template:`
        <ul>
           <todo-item v-for="i in 2"></todo-item>
        </ul>
        `,
        components:{//局部组件注册
            TodoItem:todoItemOptions  //组件名称：组件选项名
        },
    }

    Vue.component('todo-list',todoListOptions)

    new Vue({
        el:'#app',
        data:{

        }
    })

    
    
    
    </script>
</body>
</html>